<template>
  <div class="grid-template-rows">
    <h3>grid-template-rows布局</h3>
    <div class="grid-template-rows-content">
      <div v-for="item in 6" :key="item" :class="'item' + item">{{ item }}</div>
    </div>
    <pre>
      <span class="remarks">grid-template-rows用法和grid-template-columns用法差不多，只不过一个设置行一个设置列</span>
      <span class="remarks">grid-template-rows: 1fr 3fr; 表示第一行占1份，第二行占3份
      </span>
    </pre>
  </div>
</template>
<script>
export default {
  name: 'GridTemplateRows',
  data() {
    return {}
  },
}
</script>
<style lang="less" scoped>
.grid-template-rows {
  &-content {
    margin: 10px 0px;
    display: grid;
    grid-template-rows: 1fr 3fr;
    row-gap: 10px;
    div {
      background-color: red;
    }
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>
